<template>
  <div class="shopping-classify">
    <div class="login-wrap">
      <el-form class="Register">
      <h1 class="title">注册账号</h1>
        <el-form-item >
          <el-input type="text" v-model="user.username"  placeholder="注册账号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input type="password" v-model="user.password" placeholder="密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="finish" style="width: 100%;">完成</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "RegisterUser",
  data(){
    return{
      user:{
        username:'',
        password:'',
      },
    }
  },
  methods:{
    finish(){
      console.log(this.user)
      //当发生了请求等，this指向会发生转变。
      //第一步，存储当前this
      if(this.user.password===""){
        this.$message.error('密码不能为空！！！！')
        return false;
      }
      if(this.user.username===""){
        this.$message.error('账号不能为空！！！！')
        return false;
      }
      let _this = this;
      //发送请求,axios请求
      this.$axios({
        method:'post',
        url:'user/registerUser',
        data:JSON.stringify(this.user)
      }).then(res =>{ //res 就是服务器响应给前端的所有数据内容
        console.log(res)
        _this.$message(res.data.msg);
        if(res.data.status === 200){
          setTimeout(()=>{
            console.log("登陆成功")
            _this.$router.push('./');
          },100)
        }
      }).catch(error=>{
        _this.$message.error(error);
      })
      this.$router.push('/');
    },

  },

}
</script>

<style scoped>

</style>
